<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
    <script src="./vue.js"></script>
</head>

<body>
    <div class="wrap" id="app">
        <div class="title">学生系统</div>
        <div id="form">
            <p>
                姓名<input v-model="username" id="username" type="text" value="张三123" />
            </p>
            <p>年龄<input id="age" v-model="age" type="text" value="21" /></p>
            <p>
                性别
                <select id="gender" v-model="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
            </p>
            <p>
                <input type="button" @click="addUser" value="添加" id="addBtn" />
                <input type="button" @click="sortUsers" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,key) in sdata" :key="key">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td @click="del(key)">删除</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 以数据驱动视图；
        // var sdata = [{
        //     name: "张三",
        //     age: 20,
        //     gender: "男",
        // }, {
        //     name: "李四",
        //     age: 24,
        //     gender: "男",
        // }, {
        //     name: "王五",
        //     age: 21,
        //     gender: "男",
        // }, ];

        new Vue({
            el: "#app",
            data: {
                username: "",
                age: "",
                gender: "",
                sdata: [],
            },
            methods: {
                del(key) {
                    this.sdata.splice(key, 1);
                },
                addUser() {
                    this.sdata.push({
                        name: this.username,
                        age: this.age,
                        gender: this.gender
                    })

                    // this.sdata.push(obj);
                    this.username = "";
                    this.age = "";
                    this.gender = "";
                },
                sortUsers() {
                    this.sdata.sort((a, b) => a.age - b.age);
                },
            },
        });
    </script>
</body>

</html>